<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"  th:href="@{/assets/css/main.css}" />
</head>
<body>

<!-- Header -->
<header id="header" class="alt">
    <div class="inner">
        <h1>Epilogue</h1>
        <p>A free responsive site template</p>
    </div>
</header>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Banner -->
    <section id="intro" class="main">
        <span class="icon fa-diamond major"></span>
        <h2>Magna porta maximus</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae<br />
            malesuada turpis. Nam pellentesque in ac aliquam. Aliquam tempor<br />
            mi porta egestas maximus lorem ipsum dolor.</p>
        <ul class="actions">
            <li><a href="#" class="button big">Learn More</a></li>
        </ul>
    </section>

    <!-- Items -->
    <section class="main items">
        <article class="item">
            <header>
                <a href="#"><img src="/images/pic01.jpg" alt="" /></a>
                <h3>Feugiat et faucibus</h3>
            </header>
            <p>Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
            <ul class="actions">
                <li><a href="#" class="button">More</a></li>
            </ul>
        </article>
        <article class="item">
            <header>
                <a href="#"><img src="/images/pic02.jpg" alt="" /></a>
                <h3>Blandit adipiscing</h3>
            </header>
            <p>Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
            <ul class="actions">
                <li><a href="#" class="button">More</a></li>
            </ul>
        </article>
        <article class="item">
            <header>
                <a href="#"><img src="/images/pic03.jpg" alt="" /></a>
                <h3>Lorem massa nulla</h3>
            </header>
            <p>Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
            <ul class="actions">
                <li><a href="#" class="button">More</a></li>
            </ul>
        </article>
        <article class="item">
            <header>
                <a href="#"><img src="/images/pic04.jpg" alt="" /></a>
                <h3>Ipsum sed tempus</h3>
            </header>
            <p>Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
            <ul class="actions">
                <li><a href="#" class="button">More</a></li>
            </ul>
        </article>
    </section>

    <!-- CTA -->
    <section id="cta" class="main special">
        <h2>Etiam veroeros lorem</h2>
        <p>Phasellus ac augue ac magna auctor tempus proin<br />
            accumsan lacus a nibh commodo in pellentesque dui<br />
            in hac habitasse platea dictumst.</p>
        <ul class="actions">
            <li><a href="#" class="button big">Get Started</a></li>
        </ul>
    </section>

    <!-- Main -->

    <!-- Footer -->
    <footer id="footer">
        <ul class="icons">
            <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
            <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
            <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
            <li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
            <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
        </ul>
        <p class="copyright">Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </footer>

</div>

<!-- Scripts -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/skel.min.js"></script>
<script src="/assets/js/util.js"></script>
<script src="/assets/js/main.js"></script>

</body>
</html>